<template>
  <div class="user-wrap">
    <el-form class="header" :inline="true" :model="keywords" ref="keywords"
      label-position="left" label-width="85px" size="medium">
      <el-row>
        <el-col :span="6">
          <el-form-item label="用户名称">
            <el-input type="text" v-model="keywords.username"
              placeholder="请输入用户名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户电话">
            <el-input type="text" v-model="keywords.telephone"
              placeholder="请输入用户电话"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset('keywords')">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <!-- 分割线 start -->
    <div class="hr-10"></div>
    <!-- 分割线 end -->

    <div class="main-content">
      <el-table v-loading="!this.reqFlag.search" :data="tableData"
        header-row-class-name="table-header" border>
        <el-table-column label="序号" type="index" align="center" width="120">
        </el-table-column>
        <el-table-column prop="username" label="用户名"
          align="center"></el-table-column>
        <el-table-column prop="telephone" label="电话"
          align="center"></el-table-column>
        <el-table-column prop="storage_size" label="容量" align="center">
          <template slot-scope="scope">
            {{ $file.calculateFileSize(scope.row.storage_size) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"
          align="center"></el-table-column>

        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.type == 1" size="mini"
              @click="handleEdit(scope.row)">重置密码</el-button>
            <el-button :disabled="scope.row.type == 1" size="mini" type="danger"
              plain @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @current-change="handleCurrentChange"
        :current-page.sync="currentPage" :page-size="pageSize"
        layout="total, prev, pager, next" :total="totalCount">
      </el-pagination>
    </div>



  </div>
</template>

<script>

import axios from 'axios'

export default {
  data() {
    return {
      keywords: {
        id: "",
        username: '',
        telephone: '',
        password: "",
        storage_size: "",
        createTime: ""
      },
      reqFlag: { // 防止频繁点击，造成连续多次发请求
        search: true,
        state: true,
        delete: true
      },
      pageNum: 1,
      pageSize: 50, // 每页请求多少条
      currentPage: 1, // 初始时在第几页
      totalCount: 0, // 总共多少条数据
      tableData: [],
    }
  },
  components: {
  },
  computed: {
  },
  created() {
    this.queryUserList()
  },
  methods: {
    onSearch() {
      this.pageNum = 1
      this.queryUserList()
    },
    queryUserList() {
      if (this.reqFlag.search) {
        this.reqFlag.search = false
        axios({
          method: "post",
          url: `/user/page?currentPage=${this.pageNum}&pageSize=${this.pageSize}`,
          data: this.keywords
        }).then(res => {
          if (res.data.success) {
            this.tableData = res.data.dataList
            this.totalCount = res.total
          }
          this.reqFlag.search = true
        })
      }
    },

    handleCurrentChange(val) {
      this.pageNum = val
      this.queryUserList()
    },
    onReset(formName) {
      this.$refs[formName].resetFields()
      this.pageNum = 1
      this.queryUserList()
      this.curPage = 1
    },
    handleEdit(row) {
      console.log(row)
      axios({
        method: "put",
        url: `/user`,
        data: row
      }).then(res => {
        if (res.data.success) {
          this.$message({
            message: '恭喜你，密码重置成功',
            type: 'success'
          });
        } else {
          this.$message.error('密码重置失败');
        }
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          method: "delete",
          url: `/user/${row.telephone}`,
        }).then(res => {
          if (res.data.success) {
            this.queryUserList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
  }
}
</script>
<style lang="stylus">
.user-wrap{
  
  .el-table{
    .el-select{width: 76px;}
    .el-input__inner{color: inherit;}
  }
  
}
.header{
  margin-top:2% 
}
.hr-10{
    height: 10px
    background: #C0C0C0 
    opacity: 0.3
  }
 .content-header{
  margin-top:0.5%  
  margin-bottom:0.5% 
  
 }

</style>



